<template>
  <el-dialog :visible.sync="itemVisible" top="10">
    <div class="filter-container">
      <el-input v-model="listQuery.product_name" placeholder="请输入名称" clearable style="width: 200px;" class="filter-item" @input="handleSearch" />
      <el-select v-model="listQuery.category" placeholder="一级分类" class="filter-item" style="width: 130px" @change="handleSelectChange">
        <el-option v-for="item in categoryOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="listQuery.sub_category" placeholder="二级分类" class="filter-item" style="width: 130px" @change="handleSearch">
        <el-option v-for="item in subCategoryOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" @click="selectConfirm">选中并关闭</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      size="mini"
      :highlight-current-row="false"
      style="width: 100%;"
    >
      <el-table-column label="ID" prop="id" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="分类" width="200px">
        <template slot-scope="{row}">
          <div><el-link type="primary">{{ row.category.parent.name }}><el-link type="danger">{{ row.category.name }}</el-link></el-link></div>
        </template>
      </el-table-column>
      <el-table-column label="名称">
        <template slot-scope="{row}">
          <span class="link-type">{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="规格">
        <template slot-scope="{row}">
          <div
            v-for="(item) in row.items"
            :key="item.index"
            @click="select(row,item)"
            style="padding:3px;"
            v-bind:style="{border: checkedList.indexOf(item.code) > -1 ? '1px solid red' : '1px solid white'}"
          >
            <div style="cursor: pointer">
              <el-tag
                effect="plain"
              >
                规格：{{ item.name }}
              </el-tag>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </el-dialog>
</template>

<script>

import { fetchList } from '@/api/product'
import Pagination from '@/components/Pagination/index'

export default {

  name:"ItemPicker",

  props:[],

  components:{ Pagination },

  data(){
    return {
      user_id: null,
      tableList:null,
      nullItem: {
        name:null,
        item_id:null,
        price:null,
        quantity:null,
        total:null
      },
      itemVisible:false,
      insertIndex: 0,
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        category: 0,
        sub_category: 0,
        category_id: '',
        product_name: ''
      },
      cateList:[],
      categoryOptions: [{
        value: 0,
        label: '全部'
      }],
      subCategoryOptions: [{
        value: 0,
        label: '全部'
      }],
      checkedList: [],
      selectedList: []
    }
  },

  create(){},

  methods:{

    init(){
      this.tableList = []
      for(let i = 0; i < 8; i++){
        let temp = this.nullItem
        temp.id = i
        this.tableList.push(temp)
      }
    },

    showSelectDialog: async function(){
      if(this.cateList.length == 0){
        const cateList = await this.$store.dispatch('product/getCateList')
        this.categoryOptions = this.categoryOptions.concat(cateList)
        this.cateList = cateList
      }
      this.list = []
      this.total = 0
      this.getList()
      this.checkedList = []
      this.selectedList = []
      this.itemVisible = true
    },

    getList(){
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.list = response.products
        this.total = response.total
        this.listLoading = false
      }).catch(error => {
        this.list = []
        this.total = 0
        this.listLoading = false
        Promise.reject(error)
      })
    },

    handleSearch(){
      this.list = []
      this.listQuery.page = 1
      this.getList()
    },

    handleSelectChange(){
      const id = this.listQuery.category
      const list = [{
        value: 0,
        label: '全部'
      }]
      if (id === 0) {
        this.subCategoryOptions = list
      } else {
        const index = this.categoryOptions.findIndex(v => v.value === id)
        const item = this.categoryOptions[index]
        this.subCategoryOptions = list.concat(item.children)
      }
      this.listQuery.sub_category = 0
      this.handleSearch()
    },

    select(row,item){
      let checkedList = this.checkedList
      let list = this.selectedList
      if(checkedList.indexOf(item.code) > -1){
        checkedList.splice(checkedList.indexOf(item.code),1)
        for(let i in list){
          if(item.code == list[i].code){
            list.splice(i,1)
            break
          }
        }
      }else{
        checkedList.push(item.code)
        item.product_name = row.name + ' ' + item.name
        list.push(item)
      }
      this.checkedList = checkedList
      this.selectedList = list
    },

    updateTotal(index){
      if(parseFloat(this.tableList[index].price) && parseInt(this.tableList[index].quantity)){
        let number = new Number(parseFloat(this.tableList[index].price) * parseInt(this.tableList[index].quantity))
        this.tableList[index].total = number.toFixed(2)
      }else{
        this.tableList[index].total = null
      }
    },

    selectConfirm(){
      let selectedList = this.selectedList
      let item_ids = [];
      for(let i in selectedList){
        item_ids.push(selectedList[i].id);
      }
      this.itemVisible = false
      this.$emit('onSelectConfirm',item_ids.join(','))
    }
  }
}

</script>

<style scoped>

</style>
